<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<div id="userGroupContainer" class="page-box">
    <el-row>
        <el-col :md="17">
            <el-row class="qry-box">
               <el-form :inline="true" :model="qryForm" onsubmit="return false">
			      <el-form-item>
			          <el-button type="text" icon="plus" @click="openAddPage(1,$event)">新增</el-button>
			      </el-form-item>
				  <el-form-item label="用户组名称：">
				    <el-input v-model="qryForm.name" placeholder="请输入用户组名称"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" icon="search" @click="qry" :loading="loading">查询</el-button>
				  </el-form-item>
				</el-form>
            </el-row>
            <el-row class="table-box">
	            <el-table ref="userGroupTable" row-key="id" :data="tableData"  border="true" stripe="true"  style="width: 100%" :height="tableHeight" 
	             :loading="loading" :element-loading-text="loadingTxt" highlight-current-row="true" @current-change="tableSelectChange">
				    <el-table-column prop="group_name" label="用户组名称" width="150"></el-table-column>
				    <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
				    <el-table-column prop="role_names" label="拥有角色" min-width="150"></el-table-column>
				    <el-table-column label="操作" min-width="240">
				        <template scope="scope">
				            <el-button type="primary" icon="edit" size="small" :pid="scope.row.id" @click="openGroupRoleWin($event)">关联角色</el-button>
					        <el-button type="warning" icon="edit" size="small" @click="openAddPage(2,$event)" :pid="scope.row.id" >修改</el-button>
					        <el-button type="danger" icon="delete" size="small" @click="del"  :pid="scope.row.id">删除</el-button>
				        </template>
				    </el-table-column>
				  </el-table>
		   </el-row>
		   <el-row class="pagination-box">
				<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
				 :current-page="currentPage" :page-size="pageSize" :total="totalCount" layout="total,prev, pager, next">
			    </el-pagination>
			</el-row>
        </el-col>
        <el-col :md="6" :offset="1">
            <el-row class="qry-box">
                <el-button type="success" @click="openGroupUserWin">增加用户</el-button>
                <el-button type="warning" @click="removeGroupUser">移除用户</el-button>
            </el-row>
            <el-row class="table-box">
	            <el-table ref="groupUserTable" row-key="id" :data="tableUserData"  border="true" stripe="true"  style="width: 100%" :height="tableHeight" 
	             :loading="loading" :element-loading-text="loadingTxt" @selection-change="groupUserTableSelectChange" >
	                    <el-table-column type="selection" width="55"></el-table-column>
	                    <el-table-column prop="user_name" label="用户名" min-width="100"></el-table-column>
				        <el-table-column prop="alias_name" label="别名" min-width="100" :show-overflow-tooltip="true"></el-table-column>
	             </el-table>
            </el-row>
        </el-col>
    </el-row>
    <jsp:include page="addUserGroup.jsp"></jsp:include>
    <jsp:include page="addGroupUser.jsp"></jsp:include>
    <jsp:include page="addGroupRole.jsp"></jsp:include>
</div>
<script type="text/javascript" src="${ctx }/static/sys/admin/userGroup/userGroup.js"></script>